<template>
  <div class="vue-box sbot">
    <!-- ------- 内容部分 ------- -->
    <div class="s-body">
      <!-- 表格 -->
      <div style="padding: 1em 2em;">
        <el-form :inline="true">
          <div class="c-title">所有权限</div>
          <!-- 此扩展能递归渲染一个权限树，点击深层次节点，父级节点中没有被选中的节点会被自动选中，单独点击父节点，子节点会全部 选中/去选中 -->
          <el-tree ref="tree" :data="dataList" highlight-current show-checkbox node-key="id"
            :default-expanded-keys="selectList" :default-checked-keys="selectList" :props="defaultProps"
            :check-on-click-node="false">
          </el-tree>
        </el-form>
      </div>
    </div>
    <!-- ------- 底部按钮 ------- -->
    <div class="s-foot">
      <el-button type="success" @click="checkedAll()">全选</el-button>
      <el-button type="primary" @click="ok()">确定</el-button>
      <el-button @click="sa.closeModel()">取消</el-button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'setup',
  props: { param: Object },
  data() {
    return {
      roleId: this.param.roleId,
      // 数据集合
      dataList: [],
      // 默认选中
      selectList: [],
      // 一维数组
      ywList: [],
      haveList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    // 当前服务所有菜单
    sa.ajax('/role/permission/tree', { roleId: this.roleId }, function (res) {
      this.dataList = res.data.bt;
      // 选中的列表
      this.selectList = res.data.pms;
      this.haveList = [].concat(this.selectList);
      // 菜单数据转一维数组
      this.ywList = this.treeToArray(this.dataList);
    }.bind(this), { type: "get" })
  },
  methods: {
    // 保存
    ok: function () {
      let keys = this.$refs.tree.getCheckedKeys()
      let url = '/role/permission/updateCodeByRid'
      sa.ajax(url, { roleId: this.roleId, codes: keys.join(',') }, function (res) {
        sa.alert('设置成功', function () {
          sa.closeModel();
        });
      }.bind(this), { type: 'post', })
    },
    // 点击回调, 处理其子节点跟随父节点的选中
    node_click: function (node) {
      // 此节点现在是否被选中
      let is_select = this.$refs.tree.getCheckedKeys().indexOf(node.name) !== -1;
      if (node.children) {
        node.children.forEach(function (item) {
          this.$refs.tree.setChecked(item.name, is_select);
          // 递归
          if (item.children) {
            this.node_click(item);
          }
        }.bind(this))
      }
    },
    // 全选/ 取消全选
    checkedAll: function () {
      if (this.$refs.tree.getCheckedKeys().length !== this.ywList.length) {
        this.$refs['tree'].setCheckedNodes(this.ywList);
      } else {
        this.$refs['tree'].setCheckedNodes([]);
      }
    },
    // 将 Tree 菜单 转换为 一维平面数组
    treeToArray: function (menuList) {
      let arr = [];
      function _dg(menu_list) {
        menu_list = menu_list || [];
        for (let i = 0; i < menu_list.length; i++) {
          let menu = menu_list[i];
          arr.push(menu);
          // 如果有子菜单
          if (menu.children) {
            _dg(menu.children);
          }
        }
      }

      _dg(menuList);
      return arr;
    },
  }
}
</script>

<style scoped>
.vue-box {
  width: 100%;
  height: 600px;
}
</style>
